<template>
  <div class="content">
    <div class="left">
      <el-scrollbar style="height: 95%">
        <el-tree
          ref="treeRef"
          :data="treeData"
          :props="defaultProps"
          @node-click="nodeClick"
          default-expand-all
          node-key="id"
          highlight-current
          :current-node-key="currentNodekey"
        ></el-tree>
      </el-scrollbar>
    </div>
    <div class="right">
      <el-form inline :model="formData">
        <el-form-item label="时间">
          <el-date-picker
            type="datetime"
            placeholder="选择查询时间"
            size="mini"
            v-model="formData.searchTime"
            default-time="HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="getSearch"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <div
        class="sectionChartbox"
        v-if="this.type == 1"
        v-loading="loadingEcharts"
      >
        <div class="sectionChart" style="height: 55vh" id="crosswise"></div>
      </div>
      <div
        class="sectionChartbox"
        v-if="this.type == 2"
        v-loading="loadingEcharts"
      >
        <div class="sectionChartbox" style="height: 55vh" id="lengthways"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Axios from "axios";
import moment from "moment";
import echarts from "echarts";
import * as serviceApi from "../../../common/service.config";

Axios.defaults.withcredentials = true;
export default {
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      currentNodekey: "", //默认选中的节点树
      formData: {
        searchTime: moment().format("YYYY-MM-DD HH:mm:ss"),
      },
      data: [], //横剖面数据
      lengthwaysList: [], //纵剖面数据
      crosswiseChart: null,
      lengthwaysChart: null,
      loading: false,
      loadingEcharts: true,
      groupId: null,
      monitorId: sessionStorage.getItem("monitorId"),
      type: 1,
    };
  },
  created() {},
  mounted() {
    this.getTreeList();
  },
  methods: {
    // 获取树形菜单
    getTreeList() {
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"monitorId\\":\\"${this.monitorId}\\"}","serviceCode":"transverseProfileLeftTree","timestamp":"","uuid":""}`,
      }).then((res) => {
        if (res.data.resultcode == "0000") {
          let treeData = res.data.parameter;
          let siderList = [];
          for (let i = 0; i < treeData.length; i++) {
            if (treeData[i].list.length > 0) {
              this.currentNodekey = treeData[0].list[0].id;
              this.groupId = treeData[0].list[0].id;
              this.$nextTick(() => {
                this.$refs.treeRef.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
              });
            }
            siderList.push({
              label: treeData[i].typeName,
              children: [],
            });
            let siderListChildren = treeData[i].list;
            for (let k = 0; k < siderListChildren.length; k++) {
              siderList[i].children.push({
                id: siderListChildren[k].id,
                label: siderListChildren[k].name,
              });
            }
          }
          function isClick(obj) {
            if (obj.id == sessionStorage.getItem("type")) {
              obj.default = true;
              return obj;
            }
            for (let i in obj) {
              if (obj.children) {
                isClick(obj.children);
              } else if (Array.isArray(obj)) {
                obj.forEach((item) => {
                  isClick(item);
                });
              }
            }
          }
          isClick(siderList);
          this.treeData = siderList;
          this.getSearch();
        } else {
          this.treeData = [];
        }
      });
    },
    nodeClick(d, node, tree) {
      this.groupId = node.data.id;
      this.getSearch();
    },
    getSearch() {
      this.loadingEcharts = true;
      if (this.groupId == null) {
        this.$emit("loadingOn", this.loading);
         this.loadingEcharts = false;
      } else {
        Axios({
          url: serviceApi.KB_API,
          method: "post",
          data: `appMsg={"parameter":"{\\"groupId\\":\\"${
            this.groupId
          }\\",\\"monitorId\\":\\"${
            this.monitorId
          }\\",\\"endTime\\":\\"${moment(this.formData.searchTime).format(
            "YYYY-MM-DD HH:mm:ss"
          )}\\"}","serviceCode":"listOneDayDataByGroupProcessor","timestamp":"","uuid":""}`,
        }).then((res) => {
          this.data = res.data.parameter;
          for (let i = 0; i < this.data.length; i++) {
            var topValue = [];
            var bottomValue = [];
            var horizontalValue = [];
            var nozzleHeight = [];
            var argumentL = [];
            var stealthDate = [];
            var sensorName = [];
            let nameCross = this.data[i].name;
            this.type = this.data[i].type;
            for (let j = 0; j < this.data[i].list.length; j++) {
              for (let k = 0; k < this.data[i].list[j].sensorList.length; k++) {
                topValue[k] = Number(
                  this.data[i].list[j].sensorList[k].topValue
                ).toFixed(3);
                bottomValue[k] = Number(
                  this.data[i].list[j].sensorList[k].bottomValue
                ).toFixed(3);
                horizontalValue[k] = Number(
                  this.data[i].list[j].sensorList[k].horizontalValue
                ).toFixed(3);
                nozzleHeight[k] = Number(
                  this.data[i].list[j].sensorList[k].nozzleHeight
                ).toFixed(3);
                argumentL[k] = Number(
                  this.data[i].list[j].sensorList[k].argumentL
                ).toFixed(3);
                stealthDate[k] = Number(
                  this.data[i].list[j].sensorList[k].topValue -
                    this.data[i].list[j].sensorList[k].bottomValue
                ).toFixed(3);
                sensorName[k] = this.data[i].list[j].sensorList[k].sensorName;
              }
            }
            this.crosswise(
              topValue,
              bottomValue,
              horizontalValue,
              argumentL,
              nozzleHeight,
              sensorName,
              stealthDate,
              nameCross
            );

            this.$emit("loadingOn", this.loading);
          }
          this.loadingEcharts = false;
        });
      }
    },
    crosswise(
      topValue,
      bottomValue,
      horizontalValue,
      argumentL,
      nozzleHeight,
      sensorName,
      stealthDate,
      nameCross
    ) {
      this.crosswiseChart = echarts.init(document.getElementById("crosswise"));
      this.crosswiseChart.showLoading();
      let chartOption = {
        title: {
          text: nameCross + "渗流压力分布图",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          formatter(params) {
            let tip = params[0].name + "<br/>";
            for (let y = 0; y < params.length; y++) {
              if (params[y].value != "NaN") {
                if (params[y].seriesName != "管底高程") {
                  tip +=
                    params[y].marker +
                    params[y].seriesName +
                    " : " +
                    params[y].value +
                    "m<br/>";
                }
              }
            }
            return tip;
          },

          backgroundColor: "transparent", //标题背景色
          borderColor: "#333", //边框颜色
          borderWidth: 0, //边框线宽
          padding: 5,
          textStyle: {
            color: "#333",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {
              show: true,
            },
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLine: { onZero: true },
          splitLine: { show: false },
          splitArea: { show: false },
          data: sensorName,
          axisLabel: { interval: 0 },
        },
        yAxis: {
          name: "高程(m)",
          type: "value",
          max: 35,
          scale: true,
        },
        series: [
          {
            name: "坝面",
            type: "line",
            data: topValue,
            itemStyle: {
              normal: { color: "#333", label: { show: true } },
            },
            connectNulls: true,
          },

          {
            name: "水位高程",
            type: "line",
            data: nozzleHeight,
            itemStyle: {
              normal: { color: "skyblue", label: { show: true } },
            },
            connectNulls: true,
            smooth: true,
          },
          //最下面隐形的柱子
          {
            name: "管底高程",
            type: "bar",
            stack: "one",
            itemStyle: {
              barBorderColor: "rgba(0,0,0,0)",
              color: "rgba(0,0,0,0)",
            },

            barWidth: 5,
            data: bottomValue,
          },
          {
            name: "渗压管长",
            type: "bar",
            stack: "one",
            data: stealthDate,
            itemStyle: {
              barBorderColor: "rgba(0,0,0,0)",
              color: "rgba(255,220,130,1)",
              borderType: "solid",
            },
            barWidth: 5,
          },
        ],
      };
      this.crosswiseChart.clear();
      this.crosswiseChart.setOption(chartOption);
      setTimeout(function () {
        window.onresize = function () {
          this.crosswiseChart.resize();
        };
      }, 200);
      this.crosswiseChart.hideLoading();
    },
  },
};
</script>

<style lang='less' scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;

  .left {
    margin-top: 2.8rem;
    width: 10rem;
    height: 48rem;
    .el-scrollbar /deep/ .el-scrollbar__wrap {
      overflow-x: hidden;
    }
    .el-tree {
      background-color: transparent;
      /deep/ .el-tree-node__content:hover {
        background-color: #f0f7ff;
      }
      /deep/ .el-tree-node:focus > .el-tree-node__content {
        background-color: #f0f7ff;
      }
      /deep/ .custom-tree-node:hover {
        background: transparent;
      }
      /deep/ .el-tree-node:focus > .el-tree-node__content .custom-tree-node {
        background-color: transparent;
      }
    }
  }
  .right {
    padding-top: 2rem;
    width: 86%;
    height: 49rem;
    // border: 1px solid black;
  }
}
</style>
